<template>
  <div class="question-container">
    <div v-if="!this.$store.state.fullScreen" class="no-full">
      <questionHeader :questionInfo="questionInfo"/>
      <question-message :questionInfo="questionInfo"/>
      <question-main :questionInfo="questionInfo"/>
    </div>
    <div class="full" v-else>
      <write-answer/>
    </div>
  </div>
</template>

<script>
import axios from "@/util/axios";

import QuestionHeader from "@/components/question/QuestionHeader";
import QuestionMessage from "@/components/question/QuestionMessage";
import QuestionMain from "@/components/question/QuestionMain";
import WriteAnswer from "@/components/question/WriteAnswer";
import AskQuestion from '@/components/AskQuestion'
import AnswerEditor from '@/components/question/Editor/AnswerEditor'

export default {
  name: "Question",
  components: {
    QuestionHeader,
    QuestionMessage,
    QuestionMain,
    WriteAnswer,
    AskQuestion,
    AnswerEditor
  },
  data() {
    return {
      questionInfo: {}
    };
  },
  mounted() {
    //根据问题的id来获取问题的信息
    axios.get('question/findQuestionById',{
      params: {
        id: this.$route.params.id
      }
    }).then(res => {
      console.log(res)
      if(res.code === '1') {
        //成功获取
        this.questionInfo = res.data
      }
    })
  }
};
</script>

<style scoped lang="scss">
.question-container {
  width: 100%;
  height: 100%;
  .no-full {
    width: 100%;

  }
  .full {
    width: 100%;
    height: 100%;
  }
}

</style>